<!--
 * @Descripttion: 文件导入
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月24日11:30:03
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<slot :open="open">
		<!-- <el-button type="primary" plain @click="open">导入</el-button> -->
		<el-button type="primary" icon="sc-icon-import" style="margin-left: 20px" @click="open" v-if="!hideButton"></el-button>
	</slot>
	<el-dialog v-model="dialog" title="导入" :width="550" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-progress
			v-if="loading"
			:text-inside="true"
			:stroke-width="20"
			:percentage="percentage"
			style="margin-bottom: 15px"
		/>
		<div v-loading="loading">
			<el-upload
				ref="uploader"
				drag
				:accept="accept"
				:maxSize="maxSize"
				:limit="1"
				:data="data"
				:show-file-list="false"
				:http-request="request"
				:before-upload="before"
				:on-progress="progress"
				:on-success="success"
				:on-error="error"
			>
				<slot name="uploader">
					<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
					<div class="el-upload__text">将文件拖到此处或 <em>点击选择文件上传</em></div>
				</slot>
				<template #tip>
					<div class="el-upload__tip">
						<template v-if="tip">{{ tip }}</template>
						<template v-else>请上传小于或等于 {{ maxSize }}M 的 {{ accept }} 格式文件</template>
						<p v-if="templateUrl" style="margin-top: 7px">
							<el-link :href="templateUrl" target="_blank" type="primary" :underline="false">下载导入模板</el-link>
						</p>
					</div>
				</template>
			</el-upload>
			<el-form v-if="$slots.form" inline label-width="100px" label-position="left" style="margin-top: 18px">
				<slot name="form" :formData="formData"></slot>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success'],
	props: {
		apiObj: { type: Object, default: () => {} },
		data: { type: Object, default: () => {} },
		accept: { type: String, default: '.xls, .xlsx' },
		maxSize: { type: Number, default: 10 },
		tip: { type: String, default: '' },
		templateUrl: { type: String, default: '' },
		hideButton:{ type: Boolean, default: false }
	},
	data() {
		return {
			dialog: false,
			loading: false,
			percentage: 0,
			formData: {}
		}
	},
	mounted() {},
	methods: {
		open() {
			this.dialog = true
			this.formData = {}
		},
		close() {
			this.dialog = false
		},
		before(file) {
			const maxSize = file.size / 1024 / 1024 < this.maxSize
			if (!maxSize) {
				this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`)
				return false
			}
			this.loading = true
		},
		progress(e) {
			this.percentage = e.percent
		},
		success(res, file) {
			this.$refs.uploader.handleRemove(file)
			this.$refs.uploader.clearFiles()
			this.loading = false
			this.percentage = 0
			this.$emit('success', res, this.close)
		},
		error(err) {
			this.loading = false
			this.percentage = 0
			this.$notify.error({
				title: '上传文件未成功',
				message: err
			})
		},
		request(param) {
			Object.assign(param.data, this.formData)
			const data = new FormData()
			data.append(param.filename, param.file)
			for (const key in param.data) {
				data.append(key, param.data[key])
			}
			this.apiObj
				.post(data, {
					onUploadProgress: (e) => {
						console.log('调用请求!' + JSON.stringify(e))
						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
						param.onProgress({ percent: complete })
					}
				})
				.then((res) => {
					param.onSuccess(res)
				})
				.catch((err) => {
					param.onError(err)
				})
		}
	}
}
</script>

<style></style>
